import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { Search, Tag } from "react-vant";
import { useAppSelector } from "../../store";
import {
  addSearchActionCreator,
  clearSearchActionCreator,
  deleteSearchActionCreator,
} from "../../store/search/search";
import LazyloadImg from '../../components/lazyLoadImg'
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { ListItemType } from '../home'
const Index: React.FC = () => {
  const navigate = useNavigate()
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const search = useAppSelector((state) => state.search.search);
  const [isSearch, setIsSearch] = useState(false);
  const [list, setList] = useState<ListItemType[]>([])
  const recommed =
    search.length > 0 ? (
      <div className="user-search">
        <h4 style={{ display: "flex", justifyContent: "space-between" }}>
          <span>搜索记录</span>
          <span onClick={() => dispatch(clearSearchActionCreator())}>清空</span>
        </h4>
        <div className="user-search-box">
          {search.map((v, i) => {
            return (
              <Tag
                key={i}
                className="tag"
                plain
                closeable
                size="medium"
                type="primary"
                onClose={() => dispatch(deleteSearchActionCreator(v))}
                onClick={() => {
                  handleSearch(v);
                  setValue(v);
                  setIsSearch(true)
                } }
              >
                {v}
              </Tag>
            );
          })}
        </div>
      </div>
    ) : (
      <div className="user-search">
        <h4 style={{ display: "flex", justifyContent: "space-between" }}>
          <span>大家都在搜索</span>
          <span></span>
        </h4>
        <div className="user-search-box">
          <Tag className="tag">二十大</Tag>
          <Tag className="tag">哥,你好</Tag>
          <Tag className="tag">真不错</Tag>
          <Tag className="tag">衣服</Tag>
          <Tag className="tag">鞋子</Tag>
        </div>
      </div>
    );
  const handleSearch = (value: string) => {
    axios.get("/api/list", { params: { value } }).then((resp) => {
      console.log(resp.data);
      setList(resp.data.data)
    });
  };

  return (
    <div>
      <Search
        placeholder="请输入搜索关键词"
        value={value}
        onChange={(val) => {
          setValue(val);
        }}
        onSearch={(val) => {
          dispatch(addSearchActionCreator(val));
          setIsSearch(true);
          handleSearch(val);
        }}
        onClear={() => {
          setIsSearch(false);
          setValue('');
        }}
      />

      {isSearch ? (
        <div>
          <div className="list">
            {list.map((v) => {
              return (
                <dl key={v.id} onClick={() => navigate("/detail/" + v.id)}>
                  <dt>
                    <LazyloadImg
                      src={v.url}
                      width={120}
                      height={100}
                    ></LazyloadImg>
                  </dt>
                  <dd>
                    <h3>{v.title}</h3>
                    <p>{v.desc}</p>
                  </dd>
                </dl>
              );
            })}
          </div>
        </div>
      ) : (
        recommed
      )}
    </div>
  );
};

export default Index;
